<template>
    <div class="nav">
        <div v-for="(item,index) in listBut.listData" :key="index" class="main">
            <div :class="index%2===0? 'box1':'box2'" >{{ item.date }}</div>
            <div class="but">
                <button class="but1" :class="item.morning===1 ? 'active':''" @click="buty(item,1)" value="1">上午</button>
            </div>
            <div class="but">
                <button class="but1" :class="item.afternoon===1 ? 'active':''" @click="buty(item,2)" value="2">下午</button>
            </div>
            <div class="but">
                <button class="but1" :class="item.night===1 ? 'active':''" @click="buty(item,3)" value="3">夜班</button>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { doctorGet_dn_dayline ,doctorEdit_dn_dayline } from "@/API/doctor.api"
import { reactive, ref, watchEffect } from 'vue'
import dayjs from "dayjs"
const listBut = reactive({
    listData:[]
})
const id = 34
const list = async(id)=>{
    console.log(id);
    let res = await doctorGet_dn_dayline({id})
    let arr = JSON.parse(res.data.data[0].date)
    console.log(arr)
    listBut.listData=arr
}

const buty=(item,num)=>{
    if(num === 1) {
        item.morning = 1
    } else if (num === 2) {
        item.afternoon = 1
    } else {
        item.night = 1
    }

    let data = {
        id,
        newdate: JSON.stringify(listBut.listData)
    }
    console.log(data)

} 


if(listBut.listData.length>1){
    console.log(listBut.listData);
}


watchEffect(()=>{  
    list(id)
})

</script>

<style scoped lang="scss">
.nav{
    display: flex;
    flex-wrap: wrap;

}
.main{
    width: 150px;
    text-align: center;
}
.box1{
    height: 30px;
    line-height: 30px;
    background-color: rgb(69, 131, 131);
}
.active{
    color: red;
    // background-color: red;
}

.box2{
    height: 30px;
    line-height: 30px;
    background-color: rgb(79, 220, 220);
}
.but{
    height: 30px;
    line-height: 30px;
    // background-color: #ccc;
    .but1{
        border: none;
        background-color: #fff;
        outline: none;
        width: 100%;
    }
}

</style>